<template>
  <el-tag v-if="currentTag" :size="props.size" v-bind="currentTag?.tagConfig">{{
    currentTag?.label
  }}</el-tag>
  <span v-else>{{ props.text }}</span>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { GetStateOptionsAll } from '@/utils/common';

const props = defineProps({
  // 类型
  type: {
    type: String,
    required: true,
    validator: (value: string) => scenes.includes(value)
  },

  // 状态
  state: {
    type: [Number, String],
    default: ''
  },

  // 占位符
  text: {
    type: [Number, String],
    default: '--'
  },

  size: {
    type: String,
    default: ''
  }
});

const currentTag = computed(() =>
  stateOptsAll[props.type]?.find((item) => item.value == props.state)
);
</script>

<script lang="ts">
const stateOptsAll = GetStateOptionsAll();
const scenes = Object.keys(stateOptsAll);

export default {};
</script>

<style lang="scss" scoped>
// .custom-pipe-order-state {
//   &.success {
//     color: #67c23a;
//   }
//   &.warning {
//     color: #e6a23c;
//   }
//   &.danger {
//     color: #f56c6c;
//   }
//   &.info {
//     color: #909399;
//   }
// }
</style>
